<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>

  </style>
  <!-- 
JS 拖拽一个元素的原理：
首先要明白三个值
鼠标的位置A = {x, y}
盒子的位置B = {x, y}
鼠标在盒子内的距离C = {A.x - B.x, A.y - B.y}
涉及到三个鼠标事件
鼠标按下时，mousedown
鼠标移动时，mousemove
鼠标松开时，mouseup
然后就可以开始讲明实现过程了
鼠标按下的时候，计算出C，鼠标在盒子里距离（鼠标位置 - 盒子位置）
鼠标移动的时候，更新盒子位置 B = A - C
鼠标松开的时候，关闭2, 3过程的两个鼠标监听器
     -->
  <script>

    window.onload = function () {
      var div = document.getElementsByTagName("div")[0]
      var isDrop = false
      var x = 0
      var y = 0
      div.onmousedown = function (e) {
        var e = e || window.event
        x = e.clientX - div.offsetLeft  //计算出鼠标坐标与元素的相对距离
        y = e.clientY - div.offsetTop
        isDrop = true   //判断是否能够拖动
      }
      document.onmousemove = function (e) {
        if (isDrop) {
          var e = e || window.event
          var moveX = e.clientX - x  //计算盒子的相对移动距离移动距离
          var moveY = e.clientY - y
          //计算可移动最大距离
          var maxX = document.documentElement.clientWidth - div.offsetWidth
          var maxY = document.documentElement.clientHeight - div.offsetHeight
          //范围限定  当移动的距离最小时取最大  移动的距离最大时取最小
          //范围限定方法一
          if (moveX < 0) {
            moveX = 0
          } else if (moveX > maxX) {
            moveX = maxX;
          }

          if (moveY < 0) {
            moveY = 0;
          } else if (moveY > maxY) {
            moveY = maxY;
          }
          div.style.left = moveX + "px"; //设置样式
          div.style.top = moveY + "px";
        } else {
          return
        }
      }
      document.onmouseup = function () {
        //松开鼠标后 设置为不可移动状态
        isDrop = false
      }
    }
  </script>
  <style>
    div {
      position: absolute;
      background-color: red;
      width: 250px;
      height: 250px;
      left: 500px;
      top: 500px
    }
  </style>
</head>

<body>
  <div>
    123
  </div>
</body>


</html>